<p class="lead">提供工作或动作的实时反馈，只用简单且灵活的进度条。</p>
<p>进度条使用了CSS3的transition和animation属性来完成一些效果。这些特性在Internet Explorer
9或以下版本中、Firefox的老版本中没有被支持。Opera 12不支持animation属性。</p>
<h3>类型</h3>
<h4>基本类型</h4>
<table class="table col-md-12" style="text-align:center">
  <tbody>
    <tr>
      <th width="40%">进度条</th>
      <th>描述</th>
    </tr>
    <tr>
      <td>
        <div style="width: 40%" class="progress progress-bar" role=
        "progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
          <span class="sr-only">40% Complete (success)</span>
        </div>
      </td>
      <td>默认的进度条</td>
    </tr>
  </tbody>
</table>
<h3>变化</h3>
<h4>颜色</h4>
<p>为了一致的样式，进度条颜色使用与按钮相同的类。</p>
<table class="table col-md-12" style="text-align:center">
  <tbody>
    <tr>
      <th width="40%">进度条</th>
      <th>描述</th>
    </tr>
    <tr>
      <td>
        <div style="width: 40%" class="progress progress-bar" role=
        "progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
          <span class="sr-only">40% Complete (success)</span>
        </div>
      </td>
      <td>主要/默认</td>
    </tr>
    <tr>
      <td>
        <div style="width: 40%" class="progress progress-bar progress-bar-info"
        role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax=
        "100">
          <span class="sr-only">40% Complete (success)</span>
        </div>
      </td>
      <td>信息</td>
    </tr>
    <tr>
      <td>
        <div style="width: 40%" class=
        "progress progress-bar progress-bar-success" role="progressbar"
        aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
          <span class="sr-only">40% Complete (success)</span>
        </div>
      </td>
      <td>成功</td>
    </tr>
    <tr>
      <td>
        <div style="width: 60%" class=
        "progress progress-bar progress-bar-warning" role="progressbar"
        aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
          <span class="sr-only">60% Complete (warning)</span>
        </div>
      </td>
      <td>警告</td>
    </tr>
    <tr>
      <td>
        <div style="width: 80%" class=
        "progress progress-bar progress-bar-danger" role="progressbar"
        aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
          <span class="sr-only">80% Complete (danger)</span>
        </div>
      </td>
      <td>危险</td>
    </tr>
    <tr>
      <td>
        <div style="width: 40%" class=
        "progress progress-bar progress-bar-success" role="progressbar"
        aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
          <span class="sr-only">40% Complete (success)</span>
        </div>
      </td>
      <td>成功</td>
    </tr>
  </tbody>
</table>
<h4>效果</h4>
<p>用一个渐变可以创建条纹效果，在IE8中不可用。</p>
<table class="table col-md-12" style="text-align:center">
  <tbody>
    <tr>
      <th width="40%">进度条</th>
      <th>描述</th>
    </tr>
    <tr>
      <td>
        <div style="width: 40%" class=
        "progress progress-striped progress-bar progress-bar-success" role=
        "progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
          <span class="sr-only">40% Complete (success)</span>
        </div>
      </td>
      <td>条纹效果</td>
    </tr>
    <tr>
      <td>
        <div style="width: 45%" class=
        "progress progress-striped active progress-bar progress-bar-info" role=
        "progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100">
          <span class="sr-only">45% Complete</span>
        </div>
      </td>
      <td>
        <p>
        运动效果。给<code>.progress-striped</code>加上<code>.active</code>使它由右向左运动。在IE的所有版本不可用。</p>
      </td>
    </tr>
    <tr>
      <td>
        <div class="progress">
          <div class="progress-bar progress-bar-success" style="width: 35%">
            <span class="sr-only">35% Complete (success)</span>
          </div>
          <div class="progress-bar progress-bar-warning" style="width: 20%">
            <span class="sr-only">20% Complete (warning)</span>
          </div>
          <div class="progress-bar progress-bar-danger" style="width: 10%">
            <span class="sr-only">10% Complete (danger)</span>
          </div>
        </div>
      </td>
      <td>
        <p>堆叠效果。把多个进度条放入同一个<code>.progress</code>，使它们堆叠。</p>
      </td>
    </tr>
  </tbody>
</table>
